<template>
    <div>
        <div class="list_item">
            <el-card class="box-card">
                <template #header>
                    <div class="clearfix">
                        <span>空气湿度</span>
                    </div>
                </template>
                <div class="text item chart" ref="chart1"></div>
            </el-card>
        </div>
        <div class="list_item">
            <el-card class="box-card">
                <template #header>
                    <div class="clearfix">
                        <span>光照</span>
                    </div>
                </template>
                <div class="text item chart" ref="chart2"></div>
            </el-card>
        </div>
        <div class="list_item">
            <el-card class="box-card">
                <template #header>
                    <div class="clearfix">
                        <span>气压</span>
                    </div>
                </template>
                <div class="text item chart" ref="chart3"></div>
            </el-card>
        </div>
        <div class="list_item">
            <el-card class="box-card">
                <template #header>
                    <div class="clearfix">
                        <span>土壤湿度</span>
                    </div>
                </template>
                <div class="text item chart" ref="chart4"></div>
            </el-card>
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref } from "vue"
import { $sensorCount } from "@/api/index";
import { init } from 'echarts'
export default defineComponent({
    name: 'EchartList',
    setup() {
        const chart1 = ref(null);
        const chart2 = ref(null);
        const chart3 = ref(null);
        const chart4 = ref(null);
        /* ======================== */
        onMounted(() => {

            $sensorCount().then(res => {
                const chartDom1: any = chart1.value;
                const chartAir1 = init(chartDom1)
                var option1 = {
                    xAxis: {
                        type: 'category',
                        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            data: res.data.data.air,
                            type: 'line',
                            smooth: true
                        }
                    ]
                };
                chartAir1.setOption(option1);


                const chartDom2: any = chart2.value;
                const chartAir2 = init(chartDom2)
                var option2 = {
                    xAxis: {
                        type: 'category',
                        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            data: res.data.data.beam,
                            type: 'bar',
                            smooth: true
                        }
                    ]
                };
                chartAir2.setOption(option2);

                const chartDom3: any = chart3.value;
                const chartAir3 = init(chartDom3)
                var option3 = {
                    legend: {
                        top: 'bottom'
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            mark: { show: true },
                            dataView: { show: true, readOnly: false },
                            restore: { show: true },
                            saveAsImage: { show: true }
                        }
                    },
                    series: [
                        {
                            name: 'Nightingale Chart',
                            type: 'pie',
                            radius: [10, 100],
                            center: ['50%', '50%'],
                            roseType: 'area',
                            itemStyle: {
                                borderRadius: 8
                            },
                            data: res.data.data.pressure
                        }
                    ]
                };
                chartAir3.setOption(option3);

                const chartDom4: any = chart4.value;
                const chartAir4 = init(chartDom4)
                var option4 = {
                    xAxis: {
                        type: 'category',
                        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            data: res.data.data.soil,
                            type: 'line',
                            smooth: true
                        }
                    ]
                };
                chartAir4.setOption(option4);
            })
        })
        return { chart1, chart2, chart3, chart4 }
    }

    // data() {
    //     return {
    //         arr: ['空气湿度', '光照', '气压', '土壤湿度']
    //     };
    // },

    // mounted() {
    //     $sensorCount().then(res => {
    //         this.draw(res.data.data)
    //     })
    // },

    // methods: {
    //     draw(data) {
    //         let chart1 = this.$echarts.init(this.$refs.chart1)
    //         var option1 = {
    //             xAxis: {
    //                 type: 'category',
    //                 data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    //             },
    //             yAxis: {
    //                 type: 'value'
    //             },
    //             series: [
    //                 {
    //                     data: data.air,
    //                     type: 'line',
    //                     smooth: true
    //                 }
    //             ]
    //         };
    //         option1 && chart1.setOption(option1);
    //         let chart2 = this.$echarts.init(this.$refs.chart2)
    //         var option2 = {
    //             xAxis: {
    //                 type: 'category',
    //                 data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    //             },
    //             yAxis: {
    //                 type: 'value'
    //             },
    //             series: [
    //                 {
    //                     data: data.beam,
    //                     type: 'bar',
    //                     smooth: true
    //                 }
    //             ]
    //         };
    //         option2 && chart2.setOption(option2);
    //         let chart3 = this.$echarts.init(this.$refs.chart3)
    //         var option3 = {
    //             legend: {
    //                 top: 'bottom'
    //             },
    //             toolbox: {
    //                 show: true,
    //                 feature: {
    //                     mark: { show: true },
    //                     dataView: { show: true, readOnly: false },
    //                     restore: { show: true },
    //                     saveAsImage: { show: true }
    //                 }
    //             },
    //             series: [
    //                 {
    //                     name: 'Nightingale Chart',
    //                     type: 'pie',
    //                     radius: [10, 100],
    //                     center: ['50%', '50%'],
    //                     roseType: 'area',
    //                     itemStyle: {
    //                         borderRadius: 8
    //                     },
    //                     data: data.pressure
    //                 }
    //             ]
    //         };
    //         option3 && chart3.setOption(option3);

    //         let chart4 = this.$echarts.init(this.$refs.chart4)
    //         var option4 = {
    //             xAxis: {
    //                 type: 'category',
    //                 data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    //             },
    //             yAxis: {
    //                 type: 'value'
    //             },
    //             series: [
    //                 {
    //                     data: data.soil,
    //                     type: 'line',
    //                     smooth: true
    //                 }
    //             ]
    //         };
    //         option4 && chart4.setOption(option4);
    //     }
    // },
});
</script>

<style lang="less" scoped>
.list_item {
    width: 50%;
    box-sizing: border-box;
    margin-top: 10px;

    .chart {
        width: 100%;
        height: 300px;
    }
}

.list_item:nth-of-type(2n-1) {
    padding-right: 10px;
}
</style>